<template>
	<view>
		<!-- 1，主要标题 -->
		<login-title :titleText="titleText"></login-title>
		<!-- 2，主要注册参数 -->
		<view class="con">
			<!-- 2.1，手机号 -->
			<login-box-phone @inputPhone="inputPhone"></login-box-phone>
			<!-- 2.2，验证码 -->
			<login-by-code :phone="form.phone" @changeYzm="changeYzm"></login-by-code>
			<!-- 2.3，密码 -->
			<login-by-pwd @changePwd="changePwd" :boxTitle="boxTitle"></login-by-pwd>
		</view>
		<!-- 3，去登录 -->
		<view class="go-login">
			<text @click="gotoLogin">已找回，去登录</text>
		</view>
		<!-- 4，找回按钮 -->
		<login-btn @clickFun="clickFun" :btnText="btnText"></login-btn>

		<!-- 5，底部隐私协议 -->
		<login-agreement :isChecked="isChecked" @selfChangde="selfChangde"></login-agreement>
	</view>
</template>

<script>
	//导入公共组件
	import loginTitle from '@/components/content/login/login-title.vue'
	import loginBoxPhone from '@/components/content/login/login-box-phone.vue'
	import loginAgreement from '@/components/content/login/login-agreement.vue'
	import loginByCode from '@/components/content/login/login-box-code.vue'
	import loginByPwd from '@/components/content/login/login-box-pwd.vue'
	import loginBtn from '@/components/content/login/login-btn.vue'

	import {
		httpReset
	} from '@/api/http/login/login.js'

	export default {
		components: {
			loginTitle,
			loginBoxPhone,
			loginAgreement,
			loginByCode,
			loginByPwd,
			loginBtn
		},
		data() {
			return {
				titleText: '找回密码',
				boxTitle: '新密码',
				//登录参数
				form: {
					phone: '',
					pwd: '',
					yzm: '',
					nickname: ''
				},
				//选中隐私协议
				isChecked: true,
				btnText: '找回密码'
			}
		},
		methods: {
			//1，输入密码时
			changePwd(pwd) {
				this.form.pwd = pwd
				//console.log(this.form.pwd)
			},
			//2，输入验证码时
			changeYzm(yzm) {
				this.form.yzm = yzm
				//console.log(this.form.yzm)
			},
			//3，是否勾选隐私协议
			selfChangde() {
				this.isChecked = !this.isChecked
			},
			//4，手机号输入时
			inputPhone(phone) {
				this.form.phone = phone
			},
			//5，点击密码找回按钮
			clickFun() {
				//1，参数判断
				//1.1，手机号检验
				var reg = /^1[0-9]{10,10}$/;
				if (!this.form.phone || !reg.test(this.form.phone)) {
					return uni.$showMsg('请输入正确手机号！')
				}
				//1.2，验证码检验
				if (!this.form.yzm || this.form.yzm.length < 6) {
					return uni.$showMsg('请输入正确验证码！')
				}
				//1.3，密码检验
				if (!this.form.pwd || this.form.pwd.length < 6) {
					return uni.$showMsg('密码长度为6-16之间！')
				}

				//2，调用找回密码接口
				httpReset(this.form).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('密码找回成功！')

					//跳转到登录页面
					// uni.navigateTo({
					// 	url:''
					// })
				})
			},
			//6，跳转登录
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.go-login {
		width: 90%;
		margin-left: 5%;
		margin-top: 40rpx;

		text {
			font-size: 36rpx;
			color: #3d66b8;
		}
	}
</style>
